<template>
  <view>
    <u-modal v-model="show" :content="content"></u-modal>
    <view class="list">
      <view class="one" @click="signTaskDetail(signTask.id,signTask.signBeginTime)" v-for="(signTask,index) in signTasks" :key="index">
        <view class="two">
          <view class="name">
            <text>签到类型：</text>
            <text :class="signTask.type === 1 ? 'audit red':'audit green'">{{ signTask.type | typeText }}</text>
          </view>
          <view class="date">
            {{ signTask.gmtCreate }}
          </view>
        </view>
        <view class="three">
          <text>开始时间：</text>
          <text>{{ signTask.signBeginTime }}</text>
        </view>
        <view class="three">
          <view class="four">
            <view class="a">
              <text>结束时间：</text>
              <text>{{ signTask.signEndTime }}</text>
            </view>
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>
        <view class="button" v-if="signTask.type !== 1">
          <u-button @click="signExtend(signTask.extend,signTask.type)" size="mini" shape="circle" type="success" :ripple="true" ripple-bg-color="#a0cfff">{{ signTask.type | btnText }}</u-button>
        </view>
        <u-line color="blue" />
      </view>
      <u-loadmore :status="status" />
    </view>
  </view>
</template>

<script>
import download from '../../utils/downloader'
export default {
  name:"sign",
  data() {
    return {
      show: false,
      content: ''
    };
  },
  props: {
    signTasks: {
      type: Array,
      default: []
    },
    status: {
      type: String,
      default: ''
    },
    courseId: {
      type: String,
      required: true
    }
  },
  methods:{
    signTaskDetail(id,bt){
      this.$u.route({
        url: '/pages/sign_detail/sign_detail',
        params: {
          id: id,
          courseId: this.courseId,
          bt: new Date(bt).getTime()
        }
      });
    },
    signExtend(extend,type) {
      if (type === 2){
        download.load(extend,"小飞云课签到二维码",true).then(([error, res]) => {
          if (error != null ){
            this.$u.toast("下载失败");
            console.log(error)
          }else {
            this.$u.toast("下载成功，二维码已保存到相册");
          }
          console.log(res)
        })
      }else {
        this.content = extend;
        this.show = true;
      }
    },
  },
  filters:{
    typeText(v){
      let str = '';
      if(v === 1){
        str = '一键签到';
      }else if(v === 2){
        str = '扫码签到';
      }else if(v === 3){
        str = '手势密码';
      }
      return str;
    },
    btnText(v){
      let str = '';
      if(v === 2){
        str = '下载二维码';
      }else{
        str = '查看手势';
      }
      return str;
    }
  }
}
</script>

<style lang="scss">
.button {
  text-align: center;
  margin-bottom: 15rpx;
}
.audit {
  height: 30rpx;
  background-color: $u-type-info-light;
  font-weight: bold;
  line-height: 30rpx;
  text-align: center;
}

.five {
  margin-right: 5rpx;
}
.sixe {
  margin-left: 5rpx;
}
.red {
  color: red;
}
.blue {
  color: blue;
}
.green {
  color: green;
}
.bold {
  font-weight: bold;
}
.list {
  display: flex;
  flex-direction: column;
  margin-bottom: 120rpx;
  font-size: 30rpx;
  font-weight: bolder;
  .one {
    width: 100%;
    height: 300rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 20rpx;
    margin-top: 20rpx;
    .two {
      display: flex;
      justify-content: space-between;
      margin: 20rpx 0 20rpx 30rpx;
      .date {
        margin-right: 20rpx;
      }
    }
    .three {
      margin:0 0 20rpx 30rpx;
      .four {
        display: flex;
        justify-content: space-between;
        margin: 0 30rpx 0 0;
      }
    }
  }
}
</style>
